<script>
export default {
    name: "Home",
    data() {
        return {
            menu: [
                {
                    path: "/pages/Demo01",
                    name: "功能1",
                    icon: "camera",
                },
                {
                    path: "/pages/Demo02",
                    name: "功能2",
                    icon: "camera-filled",
                },
                {
                    path: "/pages/Demo03",
                    name: "功能3",
                    icon: "auth-filled",
                },
                {
                    path: "",
                    name: "功能4",
                    icon: "chat",
                },
                {
                    path: "",
                    name: "功能5",
                    icon: "image-filled",
                },
                {
                    path: "",
                    name: "功能6",
                    icon: "cart-filled",
                },
                {
                    path: "",
                    name: "功能7",
                    icon: "shop-filled",
                },
                {
                    path: "",
                    name: "功能7",
                    icon: "scan",
                },
                {
                    path: "",
                    name: "功能8",
                    icon: "pyq",
                },
                {
                    path: "",
                    name: "功能9",
                    icon: "weibo",
                },
            ],
        };
    },
    methods: {
        gotoPage(menu) {
            if(menu?.path) {
                // this.$Router.push()
                uni.navigateTo({
                    url: menu.path,
                });
            } else {
                this.$refs.uToastRef.show({
                    message: "未配置菜单地址",
                });
            }
        },
    },
}
</script>

<template>
    <up-toast ref="uToastRef"></up-toast>
    <uni-grid :column="4" :highlight="true">
        <uni-grid-item v-for="(item, index) in menu" :index="index" :key="index" @tap="gotoPage(item)">
            <view class="grid-item-box" style="background-color: #fff;">
                <uni-icons class="icon" :type="item.icon" :size="48" color="#777" />
                <text class="text">{{ item.name }}</text>
            </view>
        </uni-grid-item>
    </uni-grid>
</template>

<style scoped>
.grid-item-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.grid-item-box .icon {
    display: block;
    flex-grow: 1;
    padding-top: 16rpx;
    text-align: center;
}

.grid-item-box .text {
    display: block;
    padding: 12rpx 0;
    text-align: center;
    flex-grow: 0;
}
</style>
